	<template>
		<view class="order-card-container">
			<!-- 空状态 -->
			<view class="empty-state" v-if="isEmpty()">
				<view class="empty-content">
					<view class="empty-icon-wrapper">
						<text class="empty-icon">📋</text>
					</view>
					<text class="empty-text">暂无订单数据</text>
					<text class="empty-subtext">快去抢单吧！</text>
				</view>
			</view>

			<!-- 订单列表 -->
			<view class="order-list" v-else>
				<view class="order-card" v-for="(item, index) in serviceOrderList" :key="getItemKey(item, index)">
					<!-- 可点击区域 -->
					<view class="clickable-area" @click="goPageByIndex(index, $event)">
						<!-- 订单头部：类型+状态 -->
						<view class="order-header">
							<view class="order-type-section">
								<view class="type-icon-wrapper">
									<text class="type-icon">{{ getTypeIcon(item) }}</text>
								</view>
								<text class="type-text">{{ getOrderType(item) }}</text>
							</view>
							<view class="status-tag" :class="'status-' + getOrderStatus(item)">
								<text class="status-text">{{ getStatusText(getOrderStatus(item)) }}</text>
							</view>
						</view>

						<!-- 订单内容 -->
						<view class="order-content">
							<!-- 仅限业主标识 - 梯形标签 -->
							<view v-if="item.onlyOwner" class="owner-only-tag">
								<text class="owner-only-text">仅限业主</text>
							</view>
							<!-- 用户信息 -->
							<view class="user-info">
								<view class="user-item">
									<text class="user-label">下单人：</text>
									<text class="user-name">{{ getRequesterName(item) }}</text>
								</view>
							</view>
							<!-- 任务描述 -->
							<view class="order-desc" v-if="getDescription(item) !== '暂无描述'">
								<text class="desc-text">{{ getDescription(item) }}</text>
							</view>
							<!-- 时间信息 -->
							<view class="time-info">
								<view class="time-item">
									<text class="time-label">服务时间：</text>
									<text class="time-value">{{ getServiceTime(item) }}</text>
								</view>
								<view class="time-item">
									<text class="time-label">下单时间：</text>
									<text class="time-value">{{ getCreateTime(item) }}</text>
								</view>
							</view>

							<!-- 地址信息 -->
							<view class="address-info">
								<view class="address-item" v-if="getStartAddress(item) !== '地址未知'">
									<text class="address-label">起点：</text>
									<text class="address-value">{{ getStartAddress(item) }}</text>
								</view>
								<view class="address-item">
									<text class="address-label">终点：</text>
									<text class="address-value">{{ getEndAddress(item) }}</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 订单底部：赏金 + 操作按钮 -->
					<view class="order-footer" @click.stop>
						<view class="reward-info">
							<text class="reward-label">赏金</text>
							<text class="reward-value">¥{{ getReward(item) }}</text>
						</view>
						<view class="action-buttons">
							<view v-for="(action, idx) in getOrderActions(item)" :key="idx" class="action-btn"
								:class="action.class" @click.stop="handleAction(item, action, $event)">
								<text class="action-text">{{ action.text }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="serviceOrderList.length > 0">
				<view class="load-more-content" v-if="!noMoreData">
					<view class="loading-spinner small"></view>
					<text class="load-more-text">加载更多...</text>
				</view>
				<view class="no-more-link" v-else-if="!isOrderCenterPage" @click="goToOrderCenter">
					<text class="no-more-text">前往接单大厅查看更多</text>
					<uni-icons type="right" size="16" color="#FE6100"></uni-icons>
				</view>
				<text class="no-more-text-simple" v-else>没有更多数据了</text>
			</view>

			<!-- 通用弹窗 -->
			<uni-popup ref="commonDialog" type="dialog">
				<uni-popup-dialog :mode="dialog.mode" :type="dialog.type" :title="dialog.title"
					:confirmText="dialog.confirmText" :cancelText="dialog.cancelText" :value="dialog.value"
					:placeholder="dialog.placeholder" @confirm="handleDialogConfirm" @close="handleDialogClose">
					<!-- 弹窗内容 -->
					<view class="dialog-content">
						<!-- 1. 取件信息弹窗内容 -->
						<view v-if="dialog.dialogType === 'actualInfo'" class="actual-info-dialog">
							<view class="form-item">
								<text class="label">购买金额：</text>
								<uni-easyinput :trim="true" :clearable="true" v-model="amount" placeholder="填写实际购买价格" />
							</view>
							<uni-file-picker limit="6" title="添加购物/取件凭证" v-model="imageList" :image-styles="imgStyle"
								@select="voucherUploadImages" />
						</view>

						<!-- 2. 评价弹窗内容 -->
						<view v-else-if="dialog.dialogType === 'score'" class="score-dialog">
							<view class="form-item score-form-item">
								<text class="label">评分：</text>
								<uni-rate v-model="commentForm.rating" size="20" />
							</view>
							<view class="form-item score-form-item">
								<text class="label">评价：</text>
								<uni-easyinput :trim="true" :clearable="true" v-model="commentForm.comment"
									placeholder="请输入评价内容" />
							</view>
							<view class="form-item score-form-item">
								<text class="label">图片：</text>
								<uni-file-picker limit="6" title="添加评价图片" v-model="commentForm.commentImages"
									:image-styles="imgStyle" @select="commentUploadImages" />
							</view>
						</view>

						<!-- 3. 帮我买确认完成弹窗内容 -->
						<view v-else-if="dialog.dialogType === 'buyComplete'" class="buy-complete-dialog">
							<view class="form-item">
								<text class="label">购买金额：</text>
								<text class="value">¥{{ getActualAmount(dialog.data) }}</text>
							</view>
							<view class="form-item" v-if="getPickupVouchers(dialog.data).length > 0">
								<text class="label">购买凭证：</text>
								<view class="voucher-images">
									<view v-for="(img, index) in getPickupVouchers(dialog.data)" :key="index"
										class="voucher-image-item"
										@click="previewVoucherImage(img, getPickupVouchers(dialog.data))">
										<image :src="img.url || img" class="voucher-image" mode="aspectFill" />
									</view>
								</view>
							</view>
						</view>

						<!-- 4. 业主权限弹窗内容 -->
						<view v-else-if="dialog.dialogType === 'owner'" class="owner-dialog">
							<view class="owner-icon">🏠</view>
							<text class="owner-content">{{ dialog.content }}</text>
						</view>

						<!-- 5. 默认弹窗内容 -->
						<view v-else class="default-dialog">
							<text>{{ dialog.content || '确认执行此操作吗？' }}</text>
						</view>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</template>

	<script>
		import orderMixin from "@/minixs/orderMixins.js"
		import storage from "@/utils/storage.js"

		export default {
			mixins: [orderMixin],
			props: {
				serviceOrderList: {
					type: Array,
					default: () => []
				},
				loading: {
					type: Boolean,
					default: false
				},
				noMoreData: {
					type: Boolean,
					default: false
				}
			},
			computed: {
				// 判断当前是否在接单大厅页面
				isOrderCenterPage() {
					const pages = getCurrentPages();
					if (pages.length > 0) {
						const currentPage = pages[pages.length - 1];
						return currentPage.route === 'pages/homePages/orderCenter';
					}
					return false;
				}
			},
			data() {
				return {
					dialog: {
						show: false,
						title: '',
						type: 'base',
						mode: 'base',
						confirmText: '确认',
						cancelText: '取消',
						value: '',
						placeholder: '',
						dialogType: '', // 控制弹窗内容类型
						content: '', // 纯文本内容
						data: {}, // 弹窗数据
						onConfirm: null,
						onClose: null,
					},
					amount: '', //帮我买订单实际购买金额
					imageList: [], //帮我买订单上传凭证
					orderItem: null, // 当前操作的订单项
					commentForm: {
						comment: '',
						rating: 1,
						commentImages: []
					}, // 评价表单
					imgStyle: {
						width: 120,
						height: 120,
						border: {
							color: "#ccc",
							radius: "8"
						}
					} // 图片样式
				}
			},
			methods: {
				// 获取状态文本
				getStatusText(status) {
					const statusTextMap = {
						'pending': '待接单',
						'accepted': '已接单',
						'picked': '已取件',
						'delivered': '已送达',
						'completed': '已完成',
						'cancelled': '已取消',
					};
					return statusTextMap[status] || '未知状态';
				},

				// 获取订单状态
				getOrderStatus(item) {
					if (!item || !item.status) return 'unknown';
					return item.status;
				},

				// 获取下单人名称
				getRequesterName(item) {
					if (item.requester && item.requester.nickname) {
						return item.requester.nickname;
					}
					return '未知用户';
				},

				// 获取订单类型
				getOrderType(item) {
					if (!item || !item.type) {
						return '未知类型';
					}
					return item.type;
				},

				// 获取订单描述
				getDescription(item) {
					if (!item || !item.description) {
						return '暂无描述';
					}
					return item.description;
				},

				// 获取订单项的key
				getItemKey(item, index) {
					if (!item) return `item-${index}`;
					if (item._id) return item._id;
					if (item.id) return item.id;
					return `item-${index}`;
				},

				// 跳转到订单详情页
				goPageByIndex(index, event) {
					const item = this.serviceOrderList[index];
					if (item) {
						this.goPage(item);
					}
				},

				// 获取接单人名称
				getAccepterName(item) {
					if (!item || !item.accepter || !item.accepter.nickname) {
						return '未知用户';
					}
					return item.accepter.nickname;
				},

				// 判断是否有接单人
				hasAccepter(item) {
					return item && item.accepter && item.accepter.nickname;
				},

				// 获取赏金
				getReward(item) {
					if (!item) return '0.00';
					return this.displayFee(item);
				},

				// 获取创建时间
				getCreateTime(item) {
					if (!item || !item.createdAt) return '时间未知';
					return this.formatDateTime(item.createdAt);
				},

				// 获取起点地址
				getStartAddress(item) {
					if (!item || !item.startAddress) return '地址未知';
					return item.startAddress;
				},

				// 获取终点地址
				getEndAddress(item) {
					if (!item || !item.endAddress) return '地址未知';
					return item.endAddress;
				},

				// 获取服务时间（格式化）
				getServiceTime(item) {
					if (!item || !item.serviceTime) return '立即出发';
					return this.formatDateTime(item.serviceTime);
				},

				// 格式化日期时间
				formatDateTime(str) {
					if (!str) return '';
					const d = new Date(str);
					return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
				},

				// 获取订单操作按钮 - 修复业务逻辑
				getOrderActions(item) {
					const actions = [];

					if (!item || !item.status) return actions;

					// 根据订单状态和用户权限显示不同的操作按钮
					switch (item.status) {
						case 'pending':
							// 只有非下单人才能抢单
							if (!this.isEmployer(item)) {
								actions.push({
									text: '抢单',
									class: 'action-primary',
									action: 'accept'
								});
							}
							break;
						case 'accepted':
							// 只有接单人才能取件
							if (this.isEmployee(item)) {
								actions.push({
									text: '取件',
									class: 'action-success',
									action: 'pickup'
								});
							}
							break;
						case 'picked':
							// 只有接单人才能送达
							if (this.isEmployee(item)) {
								actions.push({
									text: '送达',
									class: 'action-warning',
									action: 'deliver'
								});
							}
							break;
						case 'delivered':
							// 只有下单人才能确认完成
							if (this.isEmployer(item)) {
								actions.push({
									text: '确认完成',
									class: 'action-primary',
									action: 'complete'
								});
							}
							break;
					}

					// 添加取消操作 - 取件前可以取消订单，取件后不允许取消
					if (this.isMyOrder(item)) {
						// 只有待接单和已接单状态的订单才能取消（取件前）
						if (['pending', 'accepted'].includes(item.status)) {
							actions.push({
								text: '取消',
								class: 'action-danger',
								action: 'cancel'
							});
						}
					}

					// 添加私信功能
					if (this.isMyOrder(item) && ['accepted', 'picked', 'delivered'].includes(item.status)) {
						actions.push({
							text: '私信',
							class: 'action-info',
							action: 'message'
						});
					}

					// 添加评价功能
					if (this.isEmployer(item) && item.status === 'completed' && !item.rating) {
						actions.push({
							text: '评价',
							class: 'action-warning',
							action: 'evaluate'
						});
					}

					return actions;
				},

				// 处理操作按钮点击
				handleAction(item, action, event) {
					// 阻止事件冒泡
					if (event) {
						event.stopPropagation();
						event.preventDefault();
					}

					switch (action.action) {
						case 'accept':
							this.acceptOrder(item);
							break;
						case 'pickup':
							this.pickupOrder(item);
							break;
						case 'deliver':
							this.deliverOrder(item);
							break;
						case 'complete':
							this.clickEvent(item, '确认完成');
							break;
						case 'cancel':
							this.cancelOrder(item);
							break;
						case 'message':
							this.sendPrivateMsg(item);
							break;
						case 'evaluate':
							this.clickEvent(item, '评价');
							break;
					}
				},

				// 抢单
				acceptOrder(item) {
					if (!item) return;

					this.clickEvent(item, '立即抢单');
				},

				// 取件
				pickupOrder(item) {
					if (!item) return;

					this.clickEvent(item, '拍照取件');
				},

				// 送达
				deliverOrder(item) {
					this.clickEvent(item, '拍照送达');
				},


				// 取消订单
				cancelOrder(item) {
					// 使用 uni.showModal 作为备选方案
					uni.showModal({
						title: '取消订单',
						content: '',
						editable: true,
						placeholderText: '请输入取消原因',
						success: (res) => {
							if (res.confirm) {
								this.confirmCencel(item, res.content || '');
							}
						}
					});
				},



				// 打开通用弹窗
				openDialog(options = {}) {
					this.dialog = {
						...this.dialog,
						...options,
						show: true,
					};
					this.$nextTick(() => {
						this.$refs.commonDialog.open();
					});
				},

				handleDialogConfirm(e) {
					if (typeof this.dialog.onConfirm === 'function') {
						this.dialog.onConfirm(e);
					}
					this.dialog.show = false;
					this.$refs.commonDialog.close();
				},

				handleDialogClose() {
					if (typeof this.dialog.onClose === 'function') {
						this.dialog.onClose();
					}
					this.dialog.show = false;
					this.$refs.commonDialog.close();
				},

				// 处理弹窗提交
				handleDialogSubmit(data) {
					if (typeof this.dialog.onConfirm === 'function') {
						this.dialog.onConfirm(data);
					}
				},

				// 预览图片
				previewImage(img, imgList) {
					uni.previewImage({
						current: img,
						urls: imgList
					});
				},

				// 上传评价图片
				commentUploadImages(e) {
					// 处理评价图片上传
			
				},

				// 确认实际金额
				confirmActual(item, data) {
					// 处理实际金额确认
			
					this.clickEvent(item, '拍照取件');
				},

				// 确认取消
				confirmCencel(item, reason) {
					// 处理订单取消
					this.clickEvent(item, '取消订单');
				},

				// 判断是否为空状态
				isEmpty() {
					return !this.serviceOrderList.length && !this.loading;
				},

				// 获取订单类型图标
				getTypeIcon(item) {
					if (!item || !item.type) return '📋';

					const iconMap = {
						'帮我买': '🛒',
						'帮我送': '📦',
						'帮我取': '📥',
						'跑腿': '🏃',
						'代驾': '🚗',
						'清洁': '🧹',
						'维修': '🔧',
						'其他': '📋'
					};

					return iconMap[item.type] || '📋';
				},

				// 获取用户头像文字
				getUserAvatar(item) {
					if (!item || !item.requester || !item.requester.nickname) return '?';
					return item.requester.nickname.charAt(0).toUpperCase();
				},

				// 获取接单人头像文字
				getAccepterAvatar(item) {
					if (!item || !item.accepter || !item.accepter.nickname) return '?';
					return item.accepter.nickname.charAt(0).toUpperCase();
				},

				// 私信功能
				sendPrivateMsg(item) {
					let msgObj = this.isEmployer(item) ? item.accepter : item.requester;
					if (msgObj) {
						this.$router.smartNavigate({
							url: `/pages/homePages/messageInfo?name=${msgObj.nickname}&avatar=${msgObj.avatar}&userId=${msgObj._id}`
						});
					} else {
						uni.showToast({
							title: '无法获取聊天对象信息',
							icon: 'none'
						});
					}
				},

				// 获取实际购买金额
				getActualAmount(item) {
					if (!item) return '0.00';
					return (item.actualAmount || item.amount || 0).toFixed(2);
				},

				// 获取购买凭证
				getPickupVouchers(item) {
					if (!item) return [];
					return item.pickupVouchers || [];
				},

				// 获取总计费用
				getTotalAmount(item) {
					if (!item) return '0.00';
					const actualAmount = parseFloat(item.actualAmount || item.amount || 0);
					const reward = parseFloat(item.reward || 0);
					return (actualAmount + reward).toFixed(2);
				},

				// 预览购买凭证图片
				previewVoucherImage(currentImg, imgList) {
					const urls = imgList.map(img => img.url || img);
					const current = currentImg.url || currentImg;
					uni.previewImage({
						current: current,
						urls: urls
					});
				},

				// 跳转到接单大厅
				goToOrderCenter() {
					this.$router.smartNavigate({
						url: '/pages/homePages/orderCenter'
					});
				}
			}
		}
	</script>

	<style lang="scss" scoped>
		.order-card-container {
			min-height: 80vh;
			background: transparent;
		}

		// 空状态样式优化
		.empty-state {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 400rpx;
			padding: 60rpx 40rpx;
		}

		.empty-content {
			text-align: center;
			padding: 48rpx;
			border-radius: 24rpx;
			backdrop-filter: blur(10rpx);
		}

		.empty-icon-wrapper {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #FE6100, #ff8c42);
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 32rpx auto;
			box-shadow: 0 8rpx 24rpx rgba(254, 97, 0, 0.3);
		}

		.empty-icon {
			font-size: 60rpx;
			color: white;
		}

		.empty-text {
			font-size: 32rpx;
			color: #333;
			margin-bottom: 16rpx;
			display: block;
			font-weight: 600;
		}

		.empty-subtext {
			font-size: 26rpx;
			color: #666;
			display: block;
		}

		// 订单列表样式优化
		.order-list {
			padding: 16rpx;
		}

		.order-card {
			background: rgba(255, 255, 255, 0.9);
			backdrop-filter: blur(10rpx);
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
			overflow: hidden;
			transition: all 0.3s ease;
			border: 1rpx solid rgba(255, 255, 255, 0.2);

			&:hover {
				box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.1);
			}
		}

		// 可点击区域
		.clickable-area {
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
			border-bottom: 2rpx solid rgba(254, 97, 0, 0.1);

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(254, 97, 0, 0.02);
				opacity: 0;
				transition: opacity 0.3s ease;
				pointer-events: none;
			}

			&:active {
				transform: translateY(-2rpx);
				box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);

				&::after {
					opacity: 1;
				}
			}
		}

		// 订单头部优化
		.order-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 32rpx 20rpx 32rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
			background: linear-gradient(135deg, rgba(254, 97, 0, 0.05), rgba(255, 140, 66, 0.05));
		}

		.order-type-section {
			display: flex;
			align-items: center;
			gap: 16rpx;
		}

		.type-icon-wrapper {
			width: 48rpx;
			height: 48rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.type-icon {
			font-size: 32rpx;
			color: white;
		}

		.type-text {
			font-size: 32rpx;
			font-weight: 700;
			color: #333;
		}

		// 仅限业主标识样式 - 长方形标签
		.owner-only-tag {
			padding: 10rpx 0;
			position: absolute;
			top: 12px;
			right: -5px;
			width: 220rpx;
			background: linear-gradient(135deg, #ff6b6b, #ee5a52);
			transform: rotate(45deg) translate(30rpx, -30rpx);
			box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.owner-only-text {
			font-size: 24rpx;
			color: white;
			font-weight: 600;
			text-align: center;
		}

		.order-id {
			font-size: 22rpx;
			color: #999;
			font-family: 'Courier New', monospace;
			background: rgba(0, 0, 0, 0.05);
			padding: 4rpx 8rpx;
			border-radius: 8rpx;
		}

		.status-tag {
			padding: 8rpx 16rpx;
			border-radius: 16rpx;
			font-size: 22rpx;
			font-weight: 600;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

			&.status-pending {
				background: linear-gradient(135deg, #fff3cd, #ffeaa7);
				color: #856404;
			}

			&.status-accepted {
				background: linear-gradient(135deg, #d1ecf1, #a8e6cf);
				color: #0c5460;
			}

			&.status-picked {
				background: linear-gradient(135deg, #d4edda, #b8e6b8);
				color: #155724;
			}

			&.status-delivered {
				background: linear-gradient(135deg, #cce5ff, #a8d8ff);
				color: #004085;
			}

			&.status-completed {
				background: linear-gradient(135deg, #d1e7dd, #b8e6b8);
				color: #0f5132;
			}

			&.status-cancelled {
				background: linear-gradient(135deg, #f8d7da, #ffb3ba);
				color: #721c24;
			}
		}

		.status-text {
			font-size: 22rpx;
			font-weight: 600;
		}

		// 订单内容优化
		.order-content {
			padding: 24rpx 32rpx;
			position: relative;
			overflow: hidden;
		}

		.order-desc {
			margin-bottom: 20rpx;
			padding: 16rpx 0;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		}

		.desc-text {
			font-size: 26rpx;
			color: #333;
			line-height: 1.5;
			font-weight: 500;
		}

		.user-info {
			display: flex;
			flex-direction: column;
			gap: 12rpx;
			margin-bottom: 20rpx;
			padding: 16rpx 0;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		}

		.user-item {
			display: flex;
			align-items: center;
			gap: 12rpx;
		}

		.user-label {
			font-size: 24rpx;
			color: #666;
			min-width: 80rpx;
		}

		.user-name {
			font-size: 24rpx;
			font-weight: 600;
			color: #007bff;
			background: rgba(0, 123, 255, 0.1);
			padding: 4rpx 12rpx;
			border-radius: 12rpx;
		}

		.time-info {
			display: flex;
			flex-direction: column;
			gap: 12rpx;
			margin-bottom: 16rpx;
			padding: 16rpx 0;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		}

		.time-item {
			display: flex;
			align-items: center;
			gap: 12rpx;
		}

		.time-label {
			font-size: 24rpx;
			color: #666;
			min-width: 100rpx;
		}

		.time-value {
			font-size: 24rpx;
			color: #333;
			font-weight: 500;
		}

		.address-info {
			display: flex;
			flex-direction: column;
			gap: 12rpx;
			margin-bottom: 16rpx;
		}

		.address-item {
			display: flex;
			align-items: flex-start;
			gap: 12rpx;
		}

		.address-label {
			font-size: 24rpx;
			color: #666;
			min-width: 60rpx;
		}

		.address-value {
			font-size: 24rpx;
			color: #333;
			flex: 1;
			line-height: 1.4;
			font-weight: 500;
		}

		// 订单底部优化
		.order-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 32rpx 24rpx 32rpx;
			border-top: 2rpx solid rgba(254, 97, 0, 0.1);
			background: rgba(254, 97, 0, 0.02);
			position: relative;
			z-index: 2;
		}

		.reward-info {
			display: flex;
			align-items: center;
			gap: 8rpx;
		}

		.reward-label {
			font-size: 24rpx;
			color: #666;
		}

		.reward-value {
			font-size: 32rpx;
			font-weight: 800;
			color: #FE6100;
			text-shadow: 0 2rpx 4rpx rgba(254, 97, 0, 0.2);
		}

		.action-buttons {
			display: flex;
			gap: 12rpx;
			flex-wrap: wrap;
		}

		.action-btn {
			padding: 12rpx 20rpx;
			border-radius: 20rpx;
			font-size: 22rpx;
			font-weight: 600;
			transition: all 0.3s ease;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
				transition: left 0.5s;
			}

			&:active {
				transform: scale(0.95);

				&::before {
					left: 100%;
				}
			}

			&.action-primary {
				background: linear-gradient(135deg, #007bff, #0056b3);
				color: white;

				&:active {
					background: linear-gradient(135deg, #0056b3, #004085);
				}
			}

			&.action-success {
				background: linear-gradient(135deg, #28a745, #1e7e34);
				color: white;

				&:active {
					background: linear-gradient(135deg, #1e7e34, #155724);
				}
			}

			&.action-warning {
				background: linear-gradient(135deg, #ffc107, #e0a800);
				color: #212529;

				&:active {
					background: linear-gradient(135deg, #e0a800, #d39e00);
				}
			}

			&.action-danger {
				background: linear-gradient(135deg, #dc3545, #c82333);
				color: white;

				&:active {
					background: linear-gradient(135deg, #c82333, #bd2130);
				}
			}

			&.action-info {
				background: linear-gradient(135deg, #17a2b8, #138496);
				color: white;

				&:active {
					background: linear-gradient(135deg, #138496, #117a8b);
				}
			}
		}

		.action-text {
			font-size: 22rpx;
			font-weight: 600;
		}

		// 弹窗样式优化
		.dialog-content {
			padding: 32rpx;
			min-width: 600rpx;
			max-width: 800rpx;
		}

		.form-item {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
		}

		.label {
			font-size: 28rpx;
			color: #333;
			margin-right: 16rpx;
			min-width: 120rpx;
			font-weight: 600;
		}

		.actual-info-dialog,
		.score-dialog,
		.owner-dialog,
		.default-dialog {
			width: 100%;
		}

		.owner-dialog {
			text-align: center;
			padding: 40rpx 20rpx;
		}

		.owner-icon {
			font-size: 80rpx;
			margin-bottom: 20rpx;
		}

		.owner-content {
			font-size: 28rpx;
			color: #666;
			line-height: 1.5;
		}

		.score-dialog .form-item {
			margin-bottom: 20rpx;
		}

		.score-dialog .label {
			display: block;
			margin-bottom: 8rpx;
		}

		// 评价弹窗特殊样式
		.score-form-item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-bottom: 24rpx;
		}

		.score-form-item .label {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 12rpx;
			font-weight: 600;
			width: 100%;
		}

		.score-form-item :deep(.uni-easyinput__content) {
			width: 100%;
		}

		.score-form-item :deep(.uni-rate) {
			margin-top: 8rpx;
		}

		// 帮我买确认完成弹窗样式
		.buy-complete-dialog {
			width: 100%;
		}

		.buy-complete-dialog .form-item {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			padding: 16rpx 0;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		}

		.buy-complete-dialog .form-item:last-child {
			border-bottom: none;
		}

		.buy-complete-dialog .label {
			font-size: 28rpx;
			color: #333;
			margin-right: 16rpx;
			min-width: 120rpx;
			font-weight: 600;
		}

		.buy-complete-dialog .value {
			font-size: 28rpx;
			color: #FE6100;
			font-weight: 700;
		}

		.buy-complete-dialog .total-item {
			border-top: 2rpx solid rgba(254, 97, 0, 0.2);
			margin-top: 16rpx;
			padding-top: 20rpx;
		}

		.buy-complete-dialog .total-value {
			font-size: 32rpx;
			color: #FE6100;
			font-weight: 800;
		}

		// 购买凭证图片样式
		.voucher-images {
			display: flex;
			flex-wrap: wrap;
			gap: 12rpx;
			margin-top: 8rpx;
		}

		.voucher-image-item {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
		}

		.voucher-image-item:active {
			transform: scale(0.95);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
		}

		.voucher-image {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}

		// 图片上传组件样式优化
		:deep(.uni-file-picker__container) {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;
		}

		:deep(.uni-file-picker__lists) {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;
		}

		:deep(.uni-file-picker__item) {
			width: calc((100% - 32rpx) / 3) !important;
			height: calc((100% - 32rpx) / 3) !important;
			margin: 0 !important;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}

		:deep(.uni-file-picker__item-image) {
			width: 100% !important;
			height: 100% !important;
			border-radius: 12rpx;
		}

		:deep(.uni-file-picker__item-add) {
			width: calc((100% - 32rpx) / 3) !important;
			height: calc((100% - 32rpx) / 3) !important;
			margin: 0 !important;
			border-radius: 12rpx;
			border: 2rpx dashed #ddd;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f8f9fa;
			transition: all 0.3s ease;

			&:active {
				background: #e9ecef;
				border-color: #FE6100;
			}
		}

		:deep(.uni-file-picker__item-add-icon) {
			font-size: 48rpx;
			color: #999;
		}

		// 加载更多优化
		.load-more {
			padding: 32rpx;
			text-align: center;
		}

		.load-more-content {
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.8);
			padding: 24rpx;
			border-radius: 20rpx;
			backdrop-filter: blur(10rpx);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		}

		.loading-spinner {
			width: 32rpx;
			height: 32rpx;
			border: 3rpx solid #f3f3f3;
			border-top: 3rpx solid #FE6100;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-right: 16rpx;

			&.small {
				width: 24rpx;
				height: 24rpx;
				border-width: 2rpx;
			}
		}

		.load-more-text {
			font-size: 26rpx;
			color: #666;
			font-weight: 500;
		}

		.no-more-link {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8rpx;
			background: rgba(254, 97, 0, 0.1);
			padding: 20rpx;
			border-radius: 20rpx;
			transition: all 0.3s ease;
			cursor: pointer;

			&:active {
				transform: scale(0.95);
				background: rgba(254, 97, 0, 0.2);
			}
		}

		.no-more-text {
			font-size: 26rpx;
			color: #FE6100;
			font-weight: 600;
		}

		.no-more-text-simple {
			font-size: 26rpx;
			color: #999;
			font-weight: 500;
		}

		// 动画效果
		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		// 响应式设计
		@media (max-width: 750rpx) {
			.order-list {
				padding: 12rpx;
			}

			.order-card {
				margin-bottom: 16rpx;
				border-radius: 16rpx;
			}

			.order-header {
				padding: 20rpx 24rpx 16rpx 24rpx;
			}

			.type-icon-wrapper {
				width: 40rpx;
				height: 40rpx;
			}

			.type-icon {
				font-size: 20rpx;
			}

			.type-text {
				font-size: 26rpx;
			}

			.owner-only-tag {
				width: 100rpx;
				height: 50rpx;
				transform: rotate(45deg) translate(25rpx, -25rpx);
			}

			.owner-only-text {
				font-size: 16rpx;
			}

			.buy-complete-dialog .form-item {
				margin-bottom: 16rpx;
				padding: 12rpx 0;
			}

			.buy-complete-dialog .label {
				font-size: 24rpx;
				min-width: 100rpx;
			}

			.buy-complete-dialog .value {
				font-size: 24rpx;
			}

			.buy-complete-dialog .total-value {
				font-size: 28rpx;
			}

			.voucher-image-item {
				width: 100rpx;
				height: 100rpx;
			}

			.order-content {
				padding: 20rpx 24rpx;
			}

			.desc-text {
				font-size: 24rpx;
			}

			.user-label,
			.time-label,
			.address-label {
				font-size: 22rpx;
			}

			.user-name,
			.time-value,
			.address-value {
				font-size: 22rpx;
			}

			.reward-value {
				font-size: 28rpx;
			}

			.action-buttons {
				gap: 8rpx;
			}

			.action-btn {
				padding: 8rpx 16rpx;
				font-size: 20rpx;
			}

			.order-footer {
				padding: 16rpx 24rpx 20rpx 24rpx;
			}

			// 响应式调整
			@media (max-width: 750rpx) {

				:deep(.uni-file-picker__item),
				:deep(.uni-file-picker__item-add) {
					width: calc((100% - 24rpx) / 3) !important;
					height: calc((100% - 24rpx) / 3) !important;
				}

				:deep(.uni-file-picker__container),
				:deep(.uni-file-picker__lists) {
					gap: 12rpx;
				}
			}
		}

		// 深色模式适配
		@media (prefers-color-scheme: dark) {
			.empty-content {
				background: rgba(45, 55, 72, 0.8);
			}

			.empty-text {
				color: #ffffff;
			}

			.empty-subtext {
				color: #a0aec0;
			}

			.order-card {
				background: rgba(45, 55, 72, 0.9);
				border: 1rpx solid rgba(255, 255, 255, 0.1);
			}

			.type-text {
				color: #ffffff;
			}

			.owner-only-tag {
				background: linear-gradient(135deg, #ff6b6b, #ee5a52);
			}

			.owner-only-text {
				color: white;
			}

			.desc-text {
				color: #e2e8f0;
			}

			.user-label,
			.time-label,
			.address-label {
				color: #a0aec0;
			}

			.user-name,
			.time-value,
			.address-value {
				color: #e2e8f0;
			}

			.reward-label {
				color: #a0aec0;
			}

			.load-more-content {
				background: rgba(45, 55, 72, 0.8);
			}

			.load-more-text,
			.no-more-text {
				color: #a0aec0;
			}

			.buy-complete-dialog .label {
				color: #e2e8f0;
			}

			.buy-complete-dialog .value,
			.buy-complete-dialog .total-value {
				color: #FE6100;
			}

			.buy-complete-dialog .total-item {
				border-top-color: rgba(254, 97, 0, 0.3);
			}

			.voucher-image-item {
				box-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.1);
			}

			.voucher-image-item:active {
				box-shadow: 0 4rpx 16rpx rgba(255, 255, 255, 0.2);
			}
		}
	</style>